import React from 'react'
import { Text, View } from '@tarojs/components'
import { getUserDepartmentAndInstitution } from '@UTILS/user'
import { getHighlightHtml } from '@UTILS/highlight'
import './UserDesc.scss'

export default function UserDesc({
  data = {}, language, oneLine, showAll = false, highlight = '', placeholder = '', onlyGroup = '', userGroupClass = ''
}) {
  const departmentAndGroup = getUserDepartmentAndInstitution(data, language, placeholder)
  const { Affiliation } = data
  const affiliationName = Affiliation ? Affiliation.Name : {}
  const institutionText = affiliationName ? affiliationName[language] : ''
  const hasHighlight = Array.isArray(highlight) && highlight.length
  let highlightHtml = onlyGroup ? institutionText : departmentAndGroup
  if (hasHighlight) {
    highlightHtml = getHighlightHtml(departmentAndGroup, highlight)
  }
  return (
    <View className="user-group-container">
      <Text className={`user-group ${userGroupClass} ${oneLine ? 'oneLine' : ''} ${showAll ? 'showAll' : ''}`}>
        {highlightHtml}
      </Text>
    </View>
  )
}
